<template>
  <div class="box">
    <h3>验证组件🍓</h3>
    <graphicCode></graphicCode>
    <h3>拖动滑块完成验证</h3>

    <div class="img-box" ref="bgImgRef">
      <img
        class="bg"
        src="https://i04piccdn.sogoucdn.com/ea77b957902bd44a"
        alt=""
      />

      <div
        class="hc"
        :style="{ left: data1.left + 'px', top: data1.top + 'px' }"
      ></div>

      <div
        class="hd"
        :style="{
          left: data.left + 'px',
          top: data.top + 'px',
          backgroundPositionX: '0' - data1.left + 'px',
          backgroundPositionY: '0' - data1.top + 'px',
        }"
      ></div>
    </div>

    <div class="btn-box">
      <div
        ref="btnRef"
        class="btn"
        :style="{ left: data.left + 'px' }"
        @mousedown="btnMousedown"
        @mouseup="btnMouseup"
      >
        |||
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, toRefs } from "vue";
import graphicCode from '../../../../../components/graphicCode/index.vue'
// 全局

let props = defineProps({
  top: {
    type: Number,
    default: 140,
  },
});

let $emit = defineEmits(["getPosition"]);

const data = reactive({
  left: 0,

  top: props.top,
  // 计算出的位置
  btnLeft: 0,
  btnRef: null,
  offsetLeft: 0,
  positon: 0,
  bgImgRef: null,
});

const data1 = reactive({
  left: 70,
  top: props.top,
  // 计算出的位置
  btnLeft: 0,
  btnRef: null,
  offsetLeft: 0,
  bgImgRef: null,
});

// 解构ref
const { btnRef, bgImgRef } = toRefs(data);

// let btnRef=ref(null)

onMounted(() => {
  // data1随机位置
  data1.left = (Math.random() * (200 - 70) + 70).toFixed(0);
  data1.top = (Math.random() * (200 - 50 - 50) ).toFixed(0);
  data.top = data1.top;
  console.log(111, data1.left, data1.top);
  data.offsetLeft = data.bgImgRef.offsetLeft;

  // 监听鼠标松开

  document.body.addEventListener("mouseup", btnMouseup);
});

// 按下

var btnMousedown = (e) => {
  // 计算出鼠标按下的位置 pageX 减去按钮距离窗口的位置等于鼠标点击的位置距离按钮的边距

  data.btnLeft = e.pageX - data.btnRef.offsetLeft;
  document.body.addEventListener("mousemove", btnMousemove);
};

//滑动的时候只要求鼠标没有松开

var btnMousemove = (e) => {
  // left等于鼠标的位置pageX减去data.btnRef.offsetLeft再减去data.btnLeft（计算出的距离）
  let x = e.pageX - data.offsetLeft - data.btnLeft;
  // 判断滑动图片时是否超出范围
  if (x <= 0) x = 0;
  else if (x >= 285) x = 285;
  data.left = x;
};

// 鼠标松开

var btnMouseup = (e) => {
  console.log(2);
  $emit("getPosition", data.left);
  if (data1.left <= data.left + 3 && data1.left >= data.left - 3) {
    console.log(data1.left);
    console.log(data.left);
  //  alert("验证通过");
// success('验证通过')

  } else {
    console.log("验证失败");
  }
  document.body.removeEventListener("mousemove", btnMousemove);
};
</script>

<style scoped>
.box {
  width: 50vw;
  height: 60vh;
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 10px;
}
h3{
    margin-top: 10vh;
}
.img-box {
  position: relative;
}

.bg {
  width: 50%;
}

.hd {
  overflow: hidden;
  background: url("https://i04piccdn.sogoucdn.com/ea77b957902bd44a");
  background-size: 340px 210px;
  background-position: -70px -110px;
  position: absolute;
  height: 50px;
  width: 55px;
  left: 10px;
  cursor: pointer;
}

.hc {
  background:rgba(33, 24, 24, 0.9); 
  position: absolute;
  height: 50px;
  width: 55px;
  left: 81px;
  cursor: pointer;
}

.btn-box {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #e4e4e4;
  margin-top: 15px;
}

.btn {
  position: relative;
  top: -10px;
  left: 26px;
  width: 55px;
  height: 30px;
  text-align: center;
  letter-spacing: 5px;
  line-height: 30px;
  color: #fff;
  border-radius: 15px;
  background-color: rgb(26, 121, 255);
  box-shadow: rgb(26 121 255 / 52%) 0px 0px 10px 1px;
  cursor: pointer;
}
</style>

